<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格隔行变色</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			table {
				margin: 100px auto;
				text-align: center;
				border-collapse: collapse;
				width: 1000px;
			}

			thead tr {
				height: 30px;
				background-color: skyblue;
			}

			tbody tr {

				height: 30px;
				border-bottom: 1px solid #d7d7d7;
				font-size: 12px;
				color: blue;
			}

			.change {
				background-color: aquamarine;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>代码</th>
					<th>名称</th>
					<th>最新公布净值</th>
					<th>累计净值</th>
					<th>前单位净值</th>
					<th>净值增长率</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>003526</td>
					<td>农银金穗3个月定期开放债券</td>
					<td>1.075</td>
					<td>1.079</td>
					<td>1.074</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>003526</td>
					<td>农银金穗3个月定期开放债券</td>
					<td>1.075</td>
					<td>1.079</td>
					<td>1.074</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>003526</td>
					<td>农银金穗3个月定期开放债券</td>
					<td>1.075</td>
					<td>1.079</td>
					<td>1.074</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>003526</td>
					<td>农银金穗3个月定期开放债券</td>
					<td>1.075</td>
					<td>1.079</td>
					<td>1.074</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>003526</td>
					<td>农银金穗3个月定期开放债券</td>
					<td>1.075</td>
					<td>1.079</td>
					<td>1.074</td>
					<td>+0.047%</td>
				</tr>
				<tr>
					<td>003526</td>
					<td>农银金穗3个月定期开放债券</td>
					<td>1.075</td>
					<td>1.079</td>
					<td>1.074</td>
					<td>+0.047%</td>
				</tr>
			</tbody>
		</table>
		<script type="text/javascript">
			var trs = document.querySelector('tbody').querySelectorAll('tr');
			for (var i = 0; i < trs.length; i++) {
				// 注册鼠标经过事件
				trs[i].onmouseover = function() {
					this.className = 'change';
				}
				// 注册鼠标离开事件
				trs[i].onmouseout = function() {
					this.className = '';
				}
			}
		</script>
	</body>
</html>
